<template>
  <el-dialog v-model="inner" width="280" style="margin: auto; height: 100px;overflow-y: auto;" align-center>
    <el-input v-model="input" @keydown.enter="handleEnter" style="width: 240px" placeholder="请填写学生ID" />
  </el-dialog>
  <el-dialog v-model="props.modelValue" @close="handleDialogClose" title="统计分析界面" width="1000px">
    <el-table :data="allData" style="width: 100%">
      <el-table-column prop="studentId" label="学生ID" width="150" />
      <el-table-column prop="type" label="科目类别" width="150" />
      <el-table-column prop="subject" label="科目" width="150" />
      <el-table-column prop="score" label="分数" width="150" />
      <el-table-column prop="testDate" label="时间" />
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="comEdit(scope.$index, scope.row)">
            修改
          </el-button>
          <el-button size="small" type="danger" @click="comDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialogFooter">
        <el-button @click="addCh">增加成绩</el-button>
        <el-button @click="handleDialogClose">退出界面</el-button>
        <el-button type="primary" @click="inner = true">
          分析学生
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="centerDialogVisible" title="学生成绩分析" width="600" align-center>
    <el-table :data="userData" style="width: 100%">
      <el-table-column prop="type" label="科目类别" width="150" />
      <el-table-column prop="average" label="平均成绩" width="200" />
      <el-table-column prop="highest" label="最高分数" width="150" />
      <el-table-column prop="lowest" label="最低成绩" width="100" />
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">退出</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="editDialog"
    title="修改成绩"
    width="500"
    align-center
  >
  <el-form :label-position="left" label-width="auto" :model="userForm" style="max-width: 600px">
            <el-form-item label="学生ID">
              <el-input v-model="userForm.studentId" />
            </el-form-item>
            <el-form-item label="科目类别">
              <el-input v-model="userForm.type" />
            </el-form-item>
            <el-form-item label="科目">
              <el-input v-model="userForm.subject" />
            </el-form-item>
            <el-form-item label="分数">
              <el-input v-model="userForm.score" />
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="userForm.testDate" type="datetime" placeholder="选择时间" />
            </el-form-item>
          </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialog = false">取消</el-button>
        <el-button type="primary" @click="trueEdit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
// 接收父组件传递的 modelValue prop
import { ref, onMounted, defineProps, defineEmits } from 'vue'
import { getAllStudy, getRegular, getCompetition, getTotal,add,update,deleteInfo } from '../api/student'
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

import { useStore } from 'vuex'
const store = useStore()

const input = ref(null)

const allData = ref([])
const userData = ref([])
const userForm = ref({
  studentId:'',
  type:'',
  subject:'',
  score:'',
  testDate:''
})

// 发出 update:modelValue 事件
const emit = defineEmits(['update:modelValue'])

// 如果您需要在子组件内部更改弹窗的显示状态，您可以这样做：
function closeDialog() {
  emit('update:modelValue', false)
}

// 弹窗的显示状态，与父组件的 modelValue 保持同步
const dialogVisible = props.modelValue

// 处理弹窗关闭事件
function handleDialogClose() {

  // 发出事件通知父组件更新 modelValue
  emit('update:modelValue', false)
}
const AllTabsValue = ref('竞赛成绩')
const handleClickAll = () => { }

onMounted(() => {
  refresh();
})

function refresh (){
  getAllStudy().then(res => {
    console.log(res.data)
    allData.value = res.data
  })
}

const editDialog = ref(false);
// 修改
function comEdit (index, row){
  console.log(index);
  console.log(row);
  userForm.value.studentId = row.studentId;
  userForm.value.type = row.type;
  userForm.value.subject = row.subject;
  userForm.value.score = row.score;
  userForm.value.testDate = row.score;
  editDialog.value = true;
}

const trueEdit = () => {
  update(userForm.value).then((res) => {
    console.log(res);
    refresh();
  })
}

// 删除
function comDelete(index,row) {
  console.log(index);
  console.log(row);
  delete(row.id).then((res) => {
    console.log(res);
    refresh();
  })
}

function addCh() {
  editDialog.value = true;
  add(userForm.value).then((res) => {
    console.log(res);
    refresh();
  })
  
}

const inner = ref(false)
const centerDialogVisible = ref(false)

const handleEnter = event => {
  // 执行你想要的逻辑
  console.log('回车键被按下')
  // 例如，你可以发送一个请求、更新数据等
  // 判断学生ID是否存在
  userData.value = [];
  centerDialogVisible.value = true
  const id = input.value
  getRegular(id).then((res) => {
    const data = {
      average: res.data.average,
      highest: res.data.highest,
      lowest: res.data.lowest,
      type: "平时成绩"
    }
    userData.value.push(data);
  })
  getCompetition(id).then((res) => {
    const data = {
      average: res.data.average,
      highest: res.data.highest,
      lowest: res.data.lowest,
      type: "竞赛成绩"
    }
    userData.value.push(data);
  })
  getTotal(id).then((res) => {
    const data = {
      average: res.data.average,
      highest: res.data.highest,
      lowest: res.data.lowest,
      type: "总成绩"
    }
    userData.value.push(data);
  })
}
</script>